<template>
  <div class="container">
    <div class="middle">
      <el-form
        ref="historyForm"
        :inline="true"
        :rules="rules"
        size="mini"
        :model="modelForm"
        class="demo-form-inline"
        style="display: flex; justify-content: flex-start"
      >
        <el-form-item label="训练数据选择" prop="id">
          <el-select v-model="modelForm.id"  placeholder="请选择训练数据">
            <el-option v-for="(item,index) of idList" :key="index" :label="item.name" :value="item.id">{{item.name}}</el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="参数设定" prop="type">
          <el-select v-model="modelForm.type" :disabled="true" placeholder="类型" >
            <el-option label="优化后指标数量" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label=""  prop="params" style="width: 165px">
          <el-input
            size="small"
            v-model="modelForm.params"
            placeholder="请输入优化后指标数量"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="searchBtn">
            <img
              :src="require('@/assets/images/cha3.png')"
              alt=""
              srcset=""
              style="vertical-align: middle"
            />
            模型优化计算
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="bottom">
      <div class="bottom-left">
        <TitleAndContent
          :obj="{
            title: '优化后指标',
            img: require('@/assets/images/icon_train1.png'),
          }"
        >
          <div class="content-padding">
            <el-table
              height="100%"
              :data="modelList1"
              border
              stripe
              size="mini"
              show-overflow-tooltip
              highlight-current-row
              v-loading="modelListLoading"
            >
              <el-table-column
                type="index"
                align="center"
                width="80"
                label="序号"
              >
              </el-table-column>
<!--              <el-table-column prop="index" align="center" label="排序">-->
<!--              </el-table-column>-->
              <el-table-column
                prop="name"
                align="center"
                label="能力指标名称"
                width="400"
              >
              </el-table-column>
              <el-table-column prop="value" align="center" label="贡献度">
              </el-table-column>
            </el-table>
          </div>
        </TitleAndContent>
      </div>
      <div class="bottom-right">
        <TitleAndContent
          :obj="{
            title: '其他指标',
            img: require('@/assets/images/icon_train2.png'),
          }"
        >
          <div class="content-padding">
            <el-table
              height="100%"
              :data="modelList2"
              border
              stripe
              size="mini"
              show-overflow-tooltip
              highlight-current-row
              v-loading="modelListLoading"
            >
              <el-table-column
                type="index"
                align="center"
                width="80"
                label="序号"
              >
              </el-table-column>
<!--              <el-table-column prop="index" align="center" label="排序">-->
<!--              </el-table-column>-->
              <el-table-column
                prop="name"
                align="center"
                label="能力指标名称"
                width="400"
              >
              </el-table-column>
              <el-table-column prop="value" align="center" label="贡献度">
              </el-table-column>
            </el-table>
          </div>
        </TitleAndContent>
      </div>
    </div>
  </div>
</template>
<script>
import TitleAndContent from "@/components/myselfCom/titleAndContent2";
import G6Container from "@/components/G6Container/index";
import {
  getModelByStatus,
  selectModelTreeById,
  queryById,
  queryModelById,
  deleteModel,
  modelTraining,
  modelOptimizationTraining,
  taskIdList
} from "@/api/accessModel.js";
export default {
  name: "",
  components: { TitleAndContent, G6Container },
  props: {
    data: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      rules: {
        params: [
          { required: true, message: '请输入优化后指标数量', trigger: 'blur' }
        ],
        id: [
          { required: true, message: '请选择训练数据选择', trigger: 'change' }
        ]
      },
      idList:'',
      g6Tree: {},
      modelForm: {
        id: "",
        type: "1",
        params: "",
      },
      modelListLoading: false,
      modelList1: [],
      modelList2: [
      ],
      modelCurrPage: 1,
      modelTotal: 0,
    };
  },
  methods: {
    getPretreatment() {
      taskIdList({}).then((res) => {
        if (res.code == 200) {
          this.idList = res.data;
        }
      });
    },
    searchBtn() {
      this.$refs.historyForm.validate(valid => {
        if (valid) {
          this.modelListLoading = true;

          // 校验通过，执行提交操作
          const params1 = {
            taskId: this.modelForm.id,
            n_components: this.modelForm.params,
          };
          modelOptimizationTraining(params1).then((res) => {
            if (res.code == 200) {
              this.modelList1 = res.data.featureNameResult;
              this.modelList2 = res.data.featureNameOut;
              this.modelListLoading=false
              // this.modelTotal = res.data.total;
            }
          });
        } else {
          // 校验不通过，提示用户
          this.$message.error('请选择训练数据及输入参数');
        }
      });

    },

    formatTree(node) {
      if (!node) {
        return;
      }
      node.size = [120, 50];
      // console.log(node);
      node.num = node.num ? node.num.toString() : "0";
      if (node.children && node.children.length) {
        var i = 0;
        for (i = 0; i < node.children.length; i++) {
          this.formatTree(node.children[i]);
        }
      }
    },
  },
  created() {},
  mounted() {
    this.getPretreatment()
      // this.getPretreatment()
    // this.searchBtn();
  },
};
</script>
<style lang="scss">
  .demo-form-inline .el-form-item--mini .el-form-item__error {
    padding-top: 7px;
  }
</style>
<style lang="scss" scoped>
.container {
  height: 100%;
  padding: 10px;
  box-sizing: border-box;
  .top {
    height: 50px;
    line-height: 50px;
    margin-bottom: 16px;
    font-family: Alibaba PuHuiTi;
    font-weight: 500;
    font-size: 18px;
    color: #3771f5;
  }
  .middle {
    height: 60px;
    margin-bottom: 16px;
    padding-top: 12px;
  }
  .bottom {
    height: calc(100% - 80px);
    display: flex;
    .bottom-left,
    .bottom-right {
      width: 50%;
      height: 100%;
      .content-padding{
        width: 100%;
        height: 100%;
        padding: 10px;
        box-sizing: border-box;
      }
    }
  }
  .top,
  .middle,
  .bottom {
    padding-left: 20px;
    padding-right: 20px;
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.8), #ffffff);
    box-shadow: 0px 4px 10px 0px rgba(0, 34, 64, 0.05);
  }
}
::v-deep .el-table__header-wrapper th {
  background-color: rgba(54, 112, 245, 0.05);
  color: #65769d;
  font-size: 14px;
}
</style>
